<div class="field-container" layout="row" layout-align="start center">
  <mat-button-toggle-group
    name="mode"
    (change)="modeChange()"
    [(ngModel)]="debounce"
  >
    <mat-button-toggle matTooltip="Enter/Clear Events" [value]="0">
      <mat-icon>search</mat-icon>
      Enter/Clear
    </mat-button-toggle>
    <mat-button-toggle matTooltip="Debounce Events" [value]="1">
      <mat-icon>keyboard</mat-icon>
      Debounce
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>
<p>Search Value: {{ searchBoxTerm || 'Empty' }}</p>
<div layout-gt-xs="row">
  <mat-card flex-gt-xs="60">
    <div layout="row" layout-align="start center" class="push-left push-right">
      <span class="mat-title">Card</span>
      <span flex></span>
      <td-search-box
        *ngIf="debounce"
        placeholder="Search here"
        [alwaysVisible]="alwaysVisible"
        (searchDebounce)="searchBoxTerm = $event"
        flex
      ></td-search-box>
      <td-search-box
        *ngIf="!debounce"
        placeholder="Search here"
        [alwaysVisible]="alwaysVisible"
        (searchChange)="searchBoxTerm = $event"
        (clear)="searchBoxTerm = ''"
        flex
      ></td-search-box>
    </div>
    <mat-divider></mat-divider>
    <mat-card-content>card content</mat-card-content>
  </mat-card>
</div>
<button
  mat-button
  color="accent"
  (click)="toggleAlwaysVisible()"
  class="push-top"
>
  Always visible
</button>
